import { createRouter, createWebHashHistory } from 'vue-router'
import type { RouterTypes } from '~/basic'

import Layout from '@/layout/index.vue'
export const constantRoutes: RouterTypes = [
    {
      path: '/redirect',
      component: Layout,
      hidden: true,
      children: [
        {
          path: '/redirect/:path(.*)',//传递path参数，使用params来接收，(.*)表示path需要符合的正则规则，(.表示匹配单个字符) * 表示匹配 零次到多次
          component: () => import('@/views/redirect')
        }
      ]
    },
    {
      path: '/login',
      component: () => import('@/views/login/index.vue'),
      hidden: true
    },
    // {
    //   path: '/404',
    //   component: () => import('@/views/error-page/404.vue'),
    //   hidden: true
    // },
    // {
    //   path: '/401',
    //   component: () => import('@/views/error-page/401.vue'),
    //   hidden: true
    // },
     {
      path: '/',
      component: Layout,
      redirect: '/dashboard',
      children: [
        {
          path: 'dashboard',
          name: 'Dashboard',
          component: () => import('@/views/dashboard/index.vue'),
          //using el svg icon, the elSvgIcon first when at the same time using elSvgIcon and icon
          meta: { title: 'Dashboard', icon: 'dashboard', affix: true }
        }
      ]
    },
    {
      path: '/setting-switch',
      component: Layout,
      alwaysShow:true,
      redirect: '/setting-switch/index',
      meta: { title: 'Setting Switch', elSvgIcon: 'Setting' },
      children: [
        {
          path: 'index',
          component: () => import('@/views/setting-switch/index.vue'),
          name: 'SettingSwitch',
          meta: { title: 'Setting Switch', elSvgIcon: 'Setting' }
        }
      ]
    },
    {
      path: '/nested',
      component: Layout,
      redirect: '/nested/menu1',
      name: 'Nested',
      meta: {
        title: 'Nested',
        icon: 'nested'
      },
      children: [
        {
          path: 'menu1',
          component: () => import('@/views/nested/menu1/index.vue'), // Parent router-view
          name: 'Menu1',
          meta: { title: 'Menu1' },
          children: [
            {
              path: 'menu1-1',
              component: () => import('@/views/nested/menu1/menu1-1/index.vue'),
              name: 'Menu1-1',
              meta: { title: 'Menu1-1' }
            },
            {
              path: 'menu1-2',
              component: () => import('@/views/nested/menu1/menu1-2/index.vue'),
              name: 'Menu1-2',
              meta: { title: 'Menu1-2' },
              children: [
                {
                  path: 'menu1-2-1',
                  component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1/index.vue'),
                  name: 'Menu1-2-1',
                  meta: { title: 'Menu1-2-1' }
                },
                {
                  path: 'menu1-2-2',
                  component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2/index.vue'),
                  name: 'Menu1-2-2',
                  meta: { title: 'Menu1-2-2' }
                }
              ]
            },
            {
              path: 'menu1-3',
              component: () => import('@/views/nested/menu1/menu1-3/index.vue'),
              name: 'Menu1-3',
              meta: { title: 'Menu1-3' }
            }
          ]
        },
        {
          path: 'menu2',
          component: () => import('@/views/nested/menu2/index.vue'),
          name: 'Menu2',
          meta: { title: 'menu2' }
        }
      ]
    },
    { path: "/:pathMatch(.*)", redirect: "/404", hidden: true }
  ]

const router = createRouter({
    history: createWebHashHistory(),
    scrollBehavior: () => ({ top: 0 }),
    routes: constantRoutes
  })
  
  export default router